<template>
	<div class="city-search">
		<div class="head-input">
			<input type="text"
			class="search-input"
			name=""
			placeholder="输入城市名或拼音"
			v-model="keyword"
			>
		</div>
		<div class="city-wrap" ref="wrapper" v-show="keyword">
			<ul class="city-item content">
				<li class="item border-bottom"
				v-for="item in cityArr"
				:key="item.id">
					{{item.name}}
				</li>
				<li class="item nodata border-bottom" v-show="nodata">暂无匹配城市！</li>
			</ul>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'CitySearch',
  props: {
    cities: Object
  },
  data() {
  	return {
  		keyword: '',
  		cityArr: [],
  		timer: null
  	}
  },
  mounted() {
  	this.$nextTick(() => {
	    this.scroll = new BScroll(this.$refs.wrapper, {})
    })
  },
  computed: {
  	nodata() {
  		return !this.cityArr.length
  	}
  },
  watch: {
  	keyword() {
  		if (this.timer) {
  			clearTimeout(this.timer)
  		}
  		if (!this.keyword) {
  			this.cityArr = []
  			return
  		}
  		this.timer = setTimeout(() => {
  			const list = []
	  		for (const i in this.cities) {
	  			// statements
	  			// if(citysArr[item])
	  			this.cities[i].forEach((val) => {
	  				if (val.name.indexOf(this.keyword) > -1
	  					|| val.spell.indexOf(this.keyword) > -1) {
	  					list.push(val)
	  				}
	  			})
	  		}
	  		this.cityArr = list
	  		this.scroll.scrollTo(0, 0)
  		}, 100)
  	}
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/var.styl'
@import '~styles/mixin.styl'
	.head-input
		width: 100%
		height: .72rem
		font-size: 0
		position: relative
		color: #999
		padding: 0 0.1rem
		background-color:$bgColor
		z-index: 2
		.search-input
			width: 100%
			line-height: .62rem
			padding: 0 0.1rem
			font-size: .28rem
			color: #666
			border-radius: 4px
			text-align:center
			inputFF()
	.city-wrap
		posa()
		top: 1.58rem
		left: 0
		right: 0
		bottom: 0
		z-index: 1
		background-color: #fff
		.item
			line-height: .76rem
			text-indent: .2rem
	.nodata
		text-align: center
</style>
